<template>
    <div style="display: flex;">
        <div v-for="(item, indx) in data" :key="indx" @click="tabs(item, indx)" class="tabs"
            :class="[Bcolor == indx ? 'active' : '']">
            {{ item.name }}
        </div>
    </div>
    <component :is="comId"></component>
    <hr>
    <h3>插槽</h3>
    <div>
        <dailog>
            <template v-slot="{data,index}">
                <div>插槽  {{ data }} + {{ index }}</div>
            </template>
            <template v-slot:heard>
                <div>命名插槽</div>
            </template>
        </dailog>
    </div>
</template>

<script setup lang="ts">
import Avue from '@/components/expame/A.vue'
import Bvue from '@/components/expame/B.vue'
import Cvue from '@/components/expame/C.vue'
import dailog from '@/components/slotStudent.vue'
import { reactive, ref, markRaw, shallowRef } from 'vue';

const comId = shallowRef(Avue)

const Bcolor = ref(0)

const data = reactive([
    {
        name: 'A组件',
        com: markRaw(Avue)
    },
    {
        name: 'B组件',
        com: markRaw(Bvue)
    },
    {
        name: 'C组件',
        com: markRaw(Cvue)
    }
])
const tabs = (item, index) => {
    console.log(item);
    comId.value = item.com
    Bcolor.value = index
}

</script>


<style>
.tabs {
    padding: 5px 10px;
    margin: 5px;
    border: 1px solid #eee;
    cursor: pointer;
}

.active {
    background-color: skyblue;
}
</style>